import { FormProps, useForm, UseFormReturnType } from '@/components/Form';
import { DynamicProps } from '#/utils';
import { assign } from 'lodash-es';

import { BasicTableProps } from '@/components/Table';
import { useListTable } from '@/hooks/system/useListPage';

type Props = Partial<DynamicProps<FormProps>>;

/**
 * 弹框表单样式
 * @param props
 */
export const usePopupForm = (props?: Props): UseFormReturnType => {
  const _default: FormProps = {
    labelWidth: 80,
    baseColProps: { span: 12 },
    showActionButtonGroup: false,
    rowProps: { gutter: [6, 6] },
    colon: true,
    //autocomplete: 'off',
  };
  return useForm(assign(_default, { autocomplete: 'off' }, props));
};
/**
 * 普通表单样式
 * @param props
 */
export const useCommonForm = (props?: Props): UseFormReturnType => {
  const _default: FormProps = {
    labelWidth: 90,
    baseColProps: {
      xs: 12,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 8,
      xxl: 6,
    },
    rowProps: { gutter: [6, 6] },
    colon: true,
    showActionButtonGroup: true,
    actionColOptions: {
      span: 24,
      style: {
        textAlign: 'center',
      },
    },

    submitButtonOptions: {
      text: '提交',
      preIcon: '',
    },
    resetButtonOptions: {
      text: '重置',
      preIcon: '',
    },
    //autocomplete: 'off',
  };
  return useForm(assign(_default, { autocomplete: 'off' }, props));
};

type TableProps = Partial<DynamicProps<BasicTableProps>>;

/**
 * 树形表格
 * @param tableProps
 */
export const useTreeListPage = (tableProps: TableProps) => {
  const _defaultprops: TableProps = {
    pagination: false,
    isTreeTable: true,
    formConfig: {
      //autoAdvancedCol: 4,
      baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
      actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
    },
  };
  return useListTable(assign(_defaultprops, tableProps));
};
/**
 * 分页表格
 * @param tableProps
 */
export const useListPageCommon = (tableProps: TableProps) => {
  const _default: TableProps = {
    rowKey: 'id',
    // defSort: {
    //   column: 'id',
    //   orderby: 'descending',
    // },
    actionColumn: {
      width: 150,
      //是否锁定操作列取值 right ,left,false
      fixed: 'right',
    },
  };
  return useListTable({ ..._default, ...tableProps });
};
